<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<link rel="stylesheet" href="./lib/animate.css"/>
	</head>
	<body>
		<div id="app">
			<input type="button" value="动画" @click="flag=!flag" />
			<!-- 使用transition元素，把徐奥被动画控制的元素，包裹起来 ,其过度作用，是vue提供的-->
			<!-- :duration="200" 设置入场和立场时候的动画时长-->
			<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
				<h3 v-if="flag" class="animated">这是一个动画</h3>
			</transition>
			<!-- :duration="{ enter: 200,leave: 400}" 分别设置入场的时长 和 离场的时长 -->
			<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200,leave: 400}">
				<h3 v-if="flag" class="animated">这是一个动画</h3>
			</transition>
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag: false
				},
				methods: {}
			})
		</script>
	</body>
</html>
